<template>
	<view class="content" >
		<view class="top-group-view">
			<view class="top-title-view" :style="'height:'+navigationBarHeight+'px;margin-top:'+iStatusBarHeight+'px;'">
				<text class="top-title">个人中心</text>
			</view>
			<view class="head-group" v-if="isLogin" @click="accountClick()">
				<image class="head-image" :src="userInfo.avatar" v-if="userInfo.avatar"></image>
				<image class="head-image" :src="baseImageUrl+'/mine/default_logo.png'" v-else></image>
				<view style="display: flex;flex-direction: column;flex: 1;margin-left: 20rpx;">
					<text style="max-width: 300rpx;" class="text-ellipsis">{{userInfo.nickName?userInfo.nickName:"请设置名称"}}</text>
					<view style="font-size: 24rpx;color: #999999;margin-top: 8rpx;">账号：{{userInfo.mobile}}</view>
				</view>
				<image class="arrow-image" src="../../static/mine/ic_arrow.png"></image>
			</view>
			<view class="head-group" v-else>
				<image class="head-image" :src="baseImageUrl+'/mine/default_logo.png'"></image>
				<view style="display: flex;flex-direction: column;flex: 1;margin-left: 20rpx;">
					<text style="max-width: 139rpx;" class="text-ellipsis">未登录</text>
				</view>
				<text @click="loginClick()" class="login-btn-view">立即登录</text>
			</view>
		</view>
		<view class="center-group-view">
			<view @click="aboutClick()" class="item-group-view" style="margin-top: 48rpx;">
				<image class="item-left-image" :src="baseImageUrl+'/mine/ic_mine_about.png'"></image>
				<text class="item-center-txt">关于我们</text>
				<image class="arrow-image" src="../../static/mine/ic_arrow.png"></image>
			</view>
			<view @click="collectClick()" class="item-group-view">
				<image class="item-left-image" :src="baseImageUrl+'/mine/ic_mine_collect.png'"></image>
				<text class="item-center-txt">我的收藏</text>
				<image class="arrow-image" src="../../static/mine/ic_arrow.png"></image>
			</view>
			<view @click="manageClick()" class="item-group-view">
				<image class="item-left-image" :src="baseImageUrl+'/mine/ic_mine_manage.png'"></image>
				<text class="item-center-txt">账号管理</text>
				<image class="arrow-image" src="../../static/mine/ic_arrow.png"></image>
			</view>
	<!-- 		<button open-type="contact" hover-class='none' style="background: rgba(255, 255, 255, 0);padding: 0;margin: 0;">
				<view class="item-group-view">
					<image class="item-left-image" :src="baseImageUrl+'/mine/ic_mine_service.png'"></image>
					<text class="item-center-txt">联系我们</text>
					<image class="arrow-image" src="../../static/mine/ic_arrow.png"></image>
				</view>
			</button> -->
			<view @click="settingClick()" class="item-group-view">
				<image class="item-left-image" :src="baseImageUrl+'/mine/ic_mine_setting.png'"></image>
				<text class="item-center-txt">设置</text>
				<image class="arrow-image" src="../../static/mine/ic_arrow.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import configUrls from '@/common/config.js';
	
	export default {
		data() {
			return {
				baseImageUrl: configUrls.baseImageUrl,
				isLogin: false,
				userInfo: {},
				iStatusBarHeight: 0,
				navigationBarHeight: 0,
			}
		},
		onReady() {
		    //状态栏高度
		    this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;	
			const customHeight = wx.getMenuButtonBoundingClientRect();
			this.navigationBarHeight = customHeight.height + (customHeight.top - this.iStatusBarHeight) * 2;
		},
		onLoad() {
		   	
		},
		onShow() {
			this.isLogin = uni.getStorageSync("isLogin");
			if(this.isLogin) {
				this.getUserInfo();
			} 
		},
		methods: {
			getUserInfo() {
				let that = this;
				this.$Request.postJson(configUrls.getUserInfo, {
				}).then(res => {
					if (res.code == "10000") {
						that.userInfo = res.data;
						uni.setStorageSync("userInfo", that.userInfo);
						console.log(that.userInfo);
					} 
				}); 
			},
			loginClick() {
				uni.reLaunch({
				    url: '/pages/login/wxlogin'
				})
			},
			aboutClick() {
				uni.navigateTo({
					url:'./about'
				})
			},
			collectClick() {
				uni.navigateTo({
					url:'./collect'
				})
			},
			manageClick() {
				uni.navigateTo({
					url:'./manage'
				})
			},
			settingClick() {
				uni.navigateTo({
					url:'./setting'
				})
			},
			accountClick() {
				uni.navigateTo({
					url:'./accountInfo'
				})
			}
		}
	}
</script>

<style>
    @import url("../../css/mine/mine.css");
</style>
